<template>
	<view class="ikz-bid">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<view class="ikz-top-bg">
			<image class="ikz-top-bg-img" :src="service_img"></image>
		</view>
		<view class="title_txt">
			跑跑乐
		</view>

		<view class="jilubox">
			<view class="fkbox">
				<view class="fktxt">
					访客
				</view>
				<view class="fknum">
					4552
				</view>
				<view class="zrnum">
					昨日233
				</view>
			</view>
			<view class="fkbox">
				<view class="fktxt">
					订单数
				</view>
				<view class="fknum">
					4552
				</view>
				<view class="zrnum">
					昨日 23
				</view>
			</view>
			<view class="fkbox">
				<view class="fktxt">
					营业额
				</view>
				<view class="fknum">
					4552.42
				</view>
				<view class="zrnum">
					昨日 473.83
				</view>
			</view>

		</view>

		<view class="ikz-ordertop">
			<view class="leftbox">
				<view class="daibox">
					<view class="dnum">
						8
					</view>
					<view class="dtxt">
						待付款
					</view>
				</view>

				<view class="jbox">
					<view class="dnum">
						4
					</view>
					<view class="dtxt">
						进行中
					</view>
				</view>
				<view class="ybox">
					<view class="dnum">
						4
					</view>
					<view class="dtxt">
						已完成
					</view>
				</view>
			</view>
			<view class="allbox">
				<image @click="myOrder('')" src="/static/supermarket/user/all.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<view @click="myOrder('')" class="mytxt">
					我的订单
				</view>
			</view>
		</view>
		
		<view class="moneybox">
			<image src="/static/supermarket/user/moneyimg.png" style="width: 100%;height: 100%;position: absolute;" mode=""></image>
			<view class="money-box">
				<view class="leftbox">
					<view class="qbtxt">
						钱包余额(元)
					</view>
					<view class="qbnum">
						999,99.20
					</view>
					<view class="txtxt">
						可提现
					</view>
				</view>
				
				<view class="rightbox">
					<view class="qbtxt">
						待结算(元)
					</view>
					<view class="qbnum">
						3882.20
					</view>
				</view>
			</view>
		</view>
		
		<view class="fuwucard">
			<view class="itembox1" @click="tofankui">
				<view class="leftbox">
					<image src="/static/personal/user-fankui.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<view class="title">
						意见反馈
					</view>
				</view>
				<image src="/static/yjt.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
			</view>
			<view class="itembox1" @click="call">
				<view class="leftbox">
					<image src="/static/personal/user-kefu.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<view class="title">
						联系我们
					</view>
				</view>
				<image src="/static/yjt.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
			</view>
			<view class="itembox" @click="toguanyu">
				<view class="leftbox">
					<image src="/static/personal/user-guanyu.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<view class="title">
						关于我们
					</view>
				</view>
				<image src="/static/yjt.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
			</view>
			<view class="itembox" @click="toguanyu">
				<view class="leftbox">
					<image src="/static/personal/set.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<view class="title">
						设置
					</view>
				</view>
				<image src="/static/yjt.png" style="width: 28rpx;height: 28rpx;" mode=""></image>
			</view>
		</view>
		<!-- <view class="ikz-menu-box">
			<view class="ikz-menu-title">系统中心</view>
			<ikz-menu :show-data="menu_data" :css-data="menu_css"></ikz-menu>
		</view> -->
		<!-- 缺省 -->
		<!-- <view class="default-height" style="width: 100%;height: 92rpx;"></view> -->
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikzMenu from '@/pages/Component/Public/Menu/public/menu5/menu.vue';
	import ikzLogin from '@/pages/Component/Public/Login/public/login/login.vue';
	import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue';
	var app = getApp( );
	import ikz from '@/pages/Common/tools.js';
	export default {
		components: {
			ikzLoading,
			ikzMenu,
			ikzLogin,
			ikzTabbar
		},
		data( ) {
			return {
				service_img: '/static/index/bg.png',
				tabbar_Data: {
					type: 2,
					list: [ {
							title: "订单",
							url: "/pages/Component/supermarket/Program/index/index",
							iconPath: "/static/supermarket/tabbar/index_task.png",
							selectedIconPath: "/static/supermarket/tabbar/index.png",
							status: 1,
						},
						{
							title: "商铺",
							url: "/pages/Component/supermarket/Program/merchant/merchant",
							iconPath: "/static/supermarket/tabbar/marer_task.png",
							selectedIconPath: "/static/supermarket/tabbar/marer.png",
							status: 1,
						},
						{
							title: "我的",
							url: "/pages/Component/supermarket/Program/user/index",
							iconPath: "/static/supermarket/tabbar/user_task.png",
							selectedIconPath: "/static/supermarket/tabbar/user.png",
							status: 1,
						},
					]
				},
				loginData: {},
				login_css: {
					background_color: 'linear-gradient(to right,#F8C66D, #FBAB7E)',
					margin_top: 0,
					bg_border_radius: 0,
					width: 100
				},
				loading_css: {
					display: 'flex'
				},
				menu_data: {
					list: [ {
							src: '/static/supermarket/user/icon_tel.png',
							title: '商家入驻',
							url: {
								path: '',
								info: '无功能',
								mode: '5'
							}
						},
						{
							src: '/static/supermarket/user/icon_join.png',
							title: '合作加盟',
							url: {
								path: 'phone#' + app.globalData.customer_mobile,
								info: '无功能',
								mode: '5'
							}
						},
						{
							src: '/static/supermarket/user/icon_agreement.png',
							title: '用户协议',
							url: {
								path: '/pages/Component/Module/Other/Program/agreement/index',
								info: '无功能',
								mode: '2'
							}
						},
						{
							src: '/static/supermarket/user/icon_address.png',
							title: '地址管理',
							url: {
								path: '/pages/Component/Module/Address/Program/myAddress/index',
								info: 'token',
								mode: '2'
							}
						},
					]
				},
				menu_css: {
					background_color: '#fff',
					bg_border_radius: 0,
					border_radius: '0',
					color: '#888888',
					margin_top: 15,
					num: '4',
					width: 100,
					imgWidth: 72
				},
				number_info: {},
				run_apply_status: ''
			};
		},
		created( ) {
			// var that = this;
		},
		onLoad( ) {

		},
		onShow( ) {
			this.goApplyPhone( )
			if ( !uni.getStorageSync( "user_info" ) ) {
				this.loading_css.display = 'none';
				return
			}
			this.loginData.user_openinfo = uni.getStorageSync( "user_info" )
			this.loginData.mobile = app.globalData.mobile || ''
			this.orderNumber( )
			this.userAuth( ( res ) => {
				this.loading_css.display = 'none';
			} );
		},
		onPullDownRefresh( ) {
			this.goApplyPhone( )
			if ( !uni.getStorageSync( "user_info" ) ) {
				this.loading_css.display = 'none';
				uni.stopPullDownRefresh( );
				return
			}
			this.orderNumber( )
			this.userAuth( ( res ) => {
				uni.stopPullDownRefresh( );
			} );
		},
		onShareTimeline( ) {

		},
		onShareAppMessage( ) {
			return {
				title: app.globalData.share_info.share_title,
				path: '/pages/Component/supermarket/Program/user/index',
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		methods: {
			call(){
				uni.makePhoneCall({
					phoneNumber: this.customer_mobile //仅为示例
				});
			
			},
			tofankui(){
				uni.navigateTo({
					url:'/pages/Component/Module/Other/Program/feedback/index'
				})
			},
			toguanyu(){
				uni.navigateTo({
					url:'/pages/Component/Module/Other/Program/about/index'
				})
			},
			// 获取订单菜单数量角标
			orderNumber( ) {
				var path = '/xyb/supermarket/order/center_order_count';
				var data = {}
				ikz.post( path, data, res => {
					if ( res.data.code ) {
						this.number_info = res.data.data;
						this.$forceUpdate( );
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
			// 获取代理商手机号
			goApplyPhone( ) {
				var path = '/xyb/agent/phone';
				var data = {}
				ikz.post( path, data, res => {
					if ( res.data.code ) {
						this.menu_data.list[ 0 ].url.path = 'phone#' + res.data.data.phone,
							this.$forceUpdate( );
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
			// 跳转详情
			myOrder( e ) {
				if ( !uni.getStorageSync( "user_info" ) ) {
					uni.navigateTo( {
						url: "/pages/login/index"
					} )
					return
				}
				uni.navigateTo( {
					url: "/pages/Component/supermarket/Program/order/index?status=" + e
				} )
			},
			//请求页面数据
			userAuth( fn ) {
				var path = '/xyb/user/auth';
				var data = {};
				ikz.post( path, data, res => {
					if ( res.data.code ) {

					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
					fn( );
					// if(that.pull_status){
					// 	this.$emit("change",'pull');
					// }
				} );
			},
		}
	};
</script>

<style lang="scss" scoped>
	.ikz-bid {
		width: 100%;
		// height: 100%;
		// min-height: 100vh;
		// background: #F3F3F3;
	}

	.ikz-top-bg {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: -1;
	}

	.ikz-top-bg-img {
		width: 750rpx;
		height: 430rpx;
	}

	.title_txt {
		width: 100%;
		height: 48rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #067CFF;
		text-align: left;
		// margin: 110rpx auto 0px;
		margin-top: 110rpx;
		margin-left: 30rpx;
		z-index: 2;
	}

	.jilubox {
		width: 100%;
		height: 202rpx;
		margin-top: 18rpx;
		// background-color: #fff;
		display: flex;

		.fkbox {
			width: 234rpx;
			height: 100%;
			padding: 22rpx 0 34rpx 0;
			box-sizing: border-box;


			.fktxt {
				width: 100%;
				height: 38rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #247EFF;
				text-align: center;
				line-height: 38rpx;

			}

			.fknum {
				width: 100%;
				height: 44rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				text-align: center;
				line-height: 44rpx;
				margin: 15rpx auto;
			}

			.zrnum {
				width: 100%;
				height: 34rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #FF4F21;
				text-align: center;
				line-height: 34rpx;
			}
		}
	}

	.ikz-menu-title {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 0px 30rpx 10px 50rpx;
		font-weight: 800;
	}

	.ikz-menu-title:before {
		content: " ";
		display: inline-block;
		height: 40rpx;
		width: 10rpx;
		background: #FBAB7E;
		border-radius: 15rpx;
		position: absolute;
		left: 30rpx;
		top: 0px
	}
	
	.fuwucard{
		width: 690rpx;
		min-height: 296rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx; 
		margin: 224rpx auto 0;
		padding: 4rpx 26rpx 0 26rpx;
		box-sizing: border-box;
		
		.itembox1{
			width: 100%;
			height: 96rpx;
			border-bottom: 1rpx solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.leftbox{
				width: 60%;
				height: 96rpx;
				display: flex;
				align-items: center;
				
				.title{
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					text-align: left;
				}
			}
		}
		.itembox{
			width: 100%;
			height: 96rpx;
			border-bottom: 1rpx solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.leftbox{
				width: 60%;
				height: 96rpx;
				display: flex;
				align-items: center;
				
				.title{
					margin-left: 12rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					text-align: left;
				}
			}
		}
	}
	
	.moneybox{
		width: 690rpx;
		height: 204rpx;
		background: #B8D5FF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 0 auto;
		position: absolute;
		left: 30rpx;
		
		.money-box{
			width: 690rpx;
			height: 204rpx;
			position: relative;
			top: 0;
			left: 0;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			
			
			.leftbox{
				width: 50%;
				height: 204rpx;
				
				.qbtxt{
					width: 100%;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #247EFF;
					text-align: left;
					line-height: 36rpx;
				}
				
				.qbnum{
					width: 100%;
					height: 54rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
					text-align: left;
					line-height: 54rpx;
				}
				
				.txtxt{
					width: 100%;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #247EFF;
					text-align: left;
					line-height: 36rpx;
				}
			}
			.rightbox{
				width: 50%;
				height: 204rpx;
				
				.qbtxt{
					width: 100%;
					height: 36rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #247EFF;
					text-align: left;
					line-height: 36rpx;
				}
				
				.qbnum{
					width: 100%;
					height: 54rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
					text-align: left;
					line-height: 54rpx;
				}
			}
		}
	}

	.ikz-menu-box {
		box-sizing: border-box;
		padding: 30rpx 0px 30rpx;
		width: 95%;
		margin: 20rpx auto 0px;
		background: #fff;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.ikz-ordertop {
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		margin: 0 auto;
		border-radius: 15rpx;
		padding: 48rpx 0 20rpx 0;
		display: flex;


		.leftbox {
			width: 502rpx;
			height: 88rpx;
			display: flex;


			.daibox {
				width: 169rpx;
				height: 88rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.dnum {
					width: 100%;
					height: 44rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					text-align: center;
					line-height: 44rpx;
				}

				.dtxt {
					width: 100%;
					height: 34rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #000000;
					text-align: center;
					line-height: 34rpx;
				}
			}

			.jbox {
				width: 169rpx;
				height: 88rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.dnum {
					width: 100%;
					height: 44rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					text-align: center;
					line-height: 44rpx;
				}

				.dtxt {
					width: 100%;
					height: 34rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #000000;
					text-align: center;
					line-height: 34rpx;
				}
			}

			.ybox {
				width: 169rpx;
				height: 88rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.dnum {
					width: 100%;
					height: 44rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					text-align: center;
					line-height: 44rpx;
				}

				.dtxt {
					width: 100%;
					height: 34rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #000000;
					text-align: center;
					line-height: 34rpx;
				}
			}
		}

		.allbox {
			width: 248rpx;
			height: 88rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			
			.mytxt{
				width: 100%;
				height: 34rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #000000;
				text-align: center;
			}

		}
	}

	.ikz-ordertop-top {
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 60rpx;
	}

	.ikz-order-top-title {
		font-weight: 800;
		font-size: 28rpx;
	}

	.ikz-order-top-more {
		font-size: 26rpx;
		color: #888;
	}

	.ikz-ordertop-list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ikz-ordertop-item {
		position: relative;
		wdith: 25%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
	}

	.ikz-ordertop-img {
		width: 90rpx;
		height: 90rpx;
	}

	.ikz-ordertop-item-title {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		line-height: 50rpx;
	}

	.ikz-ordertop-item-num {
		position: absolute;
		right: 30rpx;
		top: -10rpx;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		background: #FBAB7E;
		border-radius: 50%;
		font-size: 23rpx;
	}
</style>